<template>
  <div class="category-list">
    <div
     class="category"
     v-for="category in categoryList"
     :key="category.id"
     @click="$showToast('敬请期待')"
    >
        <img :src="category.imgUrl"/>
        <span>{{category.name}}</span>
    </div>
  </div>
</template>
<script setup>
import categoryList from '@/config/categoryList';
</script>
<style lang="less">
.category-list{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    .category{
        width:20%;
        box-sizing: border-box;
        padding:10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
            width:36px;
            height:36px;
        }
    }

}
</style>